<template>
    <!-- 头部条 -->
    <el-card class="!border-none" shadow="never">
        <div class="flow-index">
            <section class="flex">
                <el-button v-if="route.query.type == 'edit'" type="primary" @click="handleEditFlow">
                    编辑流程
                </el-button>
                <el-button v-if="!route.query.id" type="primary" @click="saveSet">
                    创建流程
                </el-button>
            </section>
            <el-form :inline="true" :disabled="route.query.type == 'check'">
                <el-form-item label="流程名称">
                    <el-input v-model="title" placeholder="请输入流程名称" />
                </el-form-item>
                <el-form-item label="单据选择">
                    <el-select v-model="order_type" placeholder="请选择单据" clearable>
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.name"
                            :value="+item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
    <!-- 流程图区域 -->
    <div class="fd-nav-content">
        <div class="dingflow-design">
            <div class="zoom">
                <div
                    class="zoom-out"
                    :class="nowVal == 50 && 'disabled'"
                    @click="zoomSize(1)"
                ></div>
                <span>{{ nowVal }}%</span>
                <div
                    class="zoom-in"
                    :class="nowVal == 300 && 'disabled'"
                    @click="zoomSize(2)"
                ></div>
            </div>
            <div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
                <nodeWrap v-model:nodeConfig="nodeConfig" />
                <div class="end-node">
                    <div class="end-node-circle"></div>
                    <div class="end-node-text">流程结束</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 检验弹框 -->
    <errorDialog v-model:visible="tipVisible" :list="tipList" />
    <!-- 审批人抽屉 -->
    <approverDrawer />
    <!-- 条件抽屉 -->
    <conditionDrawer />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useFlow } from '@/stores/modules/flow'
import errorDialog from './components/dialog/errorDialog.vue'
import approverDrawer from './components/drawer/approverDrawer.vue'
import conditionDrawer from './components/drawer/conditionDrawer.vue'
import { listAll, flowAdd, flowEdit, adminDetail } from '@/api/financial/lists'

const { setIsTried, setNodeConfig } = useFlow()
const route = useRoute()
const router = useRouter()
const tipList = ref([])
const tipVisible = ref(false)
const nowVal = ref(100)
const processConfig = ref({})
const nodeConfig = ref({})
const options = ref([])
const title = ref('')
const order_type = ref('')
const status = ref('1')

const data = {
    nodeConfig: {
        nodeName: '流程起始',
        type: 0,
        childNode: null
    }
}
onMounted(async () => {
    await getDictList()
    if (route.query.id) {
        getFlowDetail(route.query.id)
    } else {
        init()
    }
})
// 获取单据列表
const getDictList = async () => {
    const res = await listAll({ page_no: 1, page_size: 100 })
    options.value = res.finance_process_bind_order
}
const init = () => {
    processConfig.value = data
    const { nodeConfig: nodes } = data
    nodeConfig.value = nodes
    setNodeConfig(nodes)
}
// 根据流程id 获取详情
const flowDetail = ref()
const getFlowDetail = async (id) => {
    const res = await adminDetail({ id })
    flowDetail.value = res
    data.nodeConfig = res.content.nodeConfig
    init()
    // 回显数据
    title.value = res.title
    order_type.value = res.order_type
    status.value = res.status
}
// 递归检验哪个未填写
const reErr = ({ childNode }) => {
    if (childNode) {
        const { type, error, nodeName, conditionNodes } = childNode
        if (type == 1 || type == 2) {
            if (error) {
                tipList.value.push({
                    name: nodeName,
                    type: ['', '审批人', '抄送人'][type]
                })
            }
            reErr(childNode)
        } else if (type == 3) {
            reErr(childNode)
        } else if (type == 4) {
            reErr(childNode)
            for (let i = 0; i < conditionNodes.length; i++) {
                if (conditionNodes[i].error) {
                    tipList.value.push({
                        name: conditionNodes[i].nodeName,
                        type: '条件'
                    })
                }
                reErr(conditionNodes[i])
            }
        }
    } else {
        childNode = null
    }
}
// 编辑流程
const handleEditFlow = async () => {
    setIsTried(true)
    console.log(processConfig.value)
    tipList.value = []
    if (title.value.trim() === '') {
        tipList.value.push({
            name: '流程名称',
            type: '流程名称'
        })
    }
    if (order_type.value == '') {
        tipList.value.push({
            name: '单据',
            type: '单据'
        })
    }
    reErr(nodeConfig.value)
    if (tipList.value.length != 0) {
        tipVisible.value = true
        return
    }
    const params = {
        id: flowDetail.value.id,
        title: title.value,
        order_type: order_type.value,
        status: status.value,
        content: JSON.stringify(processConfig.value)
    }
    await flowEdit(params)
    setTimeout(router.back, 1000)
}
// 新增流程
const saveSet = async () => {
    setIsTried(true)
    tipList.value = []
    if (title.value.trim() === '') {
        tipList.value.push({
            name: '流程名称',
            type: '流程名称'
        })
    }
    if (order_type.value == '') {
        tipList.value.push({
            name: '单据',
            type: '单据'
        })
    }
    reErr(nodeConfig.value)
    if (tipList.value.length != 0) {
        tipVisible.value = true
        return
    }
    const params = {
        title: title.value,
        order_type: order_type.value,
        status: status.value,
        content: JSON.stringify(processConfig.value)
    }
    await flowAdd(params);
}
const zoomSize = (type) => {
    if (type == 1) {
        if (nowVal.value == 50) {
            return
        }
        nowVal.value -= 10
    } else {
        if (nowVal.value == 300) {
            return
        }
        nowVal.value += 10
    }
}
</script>

<style>
@import './workflow.css';
</style>
<style scoped lang="scss">
.el-form-item {
    margin-bottom: 0;
}

::v-deep .el-form-item__label {
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    margin-right: 10px;
    line-height: 32px;
}

.flow-index {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
